
import React, { PureComponent } from 'react'
import { Button, Form } from 'antd'
import PageBackHeader from "@common/PageBackHeader";
import { withRouter } from "react-router-dom";
import {connect} from "react-redux";
import { openShoppingMall } from "@sagas/shoppingMall/shoppingMallSettings";
import { getUserInfoInStore } from "@sagas/user";
import ShoppingMallSettings from "@components/shoppingMall/ShoppingMallSettings";
import MallTypeAgentSvg from '@assets/svg/mallTypeAgent.svg'
import MallTypePlatformSvg from '@assets/svg/mallTypePlatform.svg'
import MallTypeSelfSvg from '@assets/svg/mallTypeSelf.svg'

const initShoppingMallInfo = {
    inventory_mode: 0,
    allow_booking: false,
    auto_confirmed_days: 15,
    booking_days: 1,
    refund_allowed_days: 7,
}

@connect(({ user }) => ({
    userInfoInStore: user.userInfoInStore
}), {
    openShoppingMall,
    getUserInfoInStore
})
@withRouter
class OpenShoppingMall extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            bizType: 'self',
            step: 1
        }

        this.formRef = React.createRef()
    }

    componentDidMount() {
        const { userInfoInStore } = this.props
        if (userInfoInStore.mall_opened) {
            this.props.history.push('/shopping-mall/settings')
        }
    }

    submitForm (values) {
        const { bizType } = this.state
        this.props.openShoppingMall({
            operation_mode: bizType,
            ...values
        }, () => {
            this.props.getUserInfoInStore(() => {
                this.props.history.push('/shopping-mall/settings')
            })
        })
    }

    handleSubmit () {
        this.formRef.current?.submit()
    }

    handleBizTypeChange (bizType) {
        this.setState({
            bizType
        })
    }

    handleStepChange (step) {
        this.setState({
            step
        })
    }

    render() {
        const { bizType, step } = this.state
        return (
            <div className="bilin-web">
                <PageBackHeader title="开通商城" backUrl="/main" />
                { step === 1 ? (
                    <>
                        <div className="bilin-web-body with-footer shopping-mall-mode-choose-page">
                            <ShoppingMallBizType value={bizType} onChange={this.handleBizTypeChange.bind(this)} />
                        </div>
                        <div className="bilin-web-footer">
                            <Button type="primary" onClick={this.handleStepChange.bind(this,2)}>前往开通</Button>
                        </div>
                    </>
                ) : null }
                { step === 2 ? (
                    <>
                        <div className="bilin-web-body with-footer shopping-mall-mode-choose-page">
                            <Form
                                ref={this.formRef}
                                name="store-edit"
                                labelCol={{ span: 4 }}
                                wrapperCol={{ span: 20 }}
                                initialValues={initShoppingMallInfo}
                                requiredMark={false}
                                onFinish={this.submitForm.bind(this)}
                                scrollToFirstError={{
                                    behavior: actions =>
                                        actions.forEach(({ el, top, left }) => {
                                            el.scrollTop = top - 100
                                            el.scrollLeft = left
                                        }),
                                }}
                            >
                                <ShoppingMallSettings bizType={bizType} isOpen/>
                            </Form>
                        </div>
                        <div className="bilin-web-footer">
                            <Button onClick={this.handleStepChange.bind(this,1)}>返回</Button>
                            <Button type="primary" onClick={this.handleSubmit.bind(this)}>立即开通</Button>
                        </div>
                    </>
                ) : null }
            </div>
        )
    }
}

const ShoppingMallBizType = props => {
    const { onChange, value } = props


    const handleClick = (bizType) => {
        onChange && onChange(bizType)
    }

    return (
            <div className="shopping-mall-mode-line">
                <div className={`shopping-mall-mode-item${value === 'self' ? ' active' : ''}`}
                     onClick={handleClick.bind(this, 'self')}
                >
                    <div className="shopping-mall-mode-name ft-24">自营商城</div>
                    <div className="shopping-mall-mode-intro ft-14">由品牌统一管理商品、会员、营销、收款、发货等经营要素</div>
                    <MallTypeSelfSvg className="shopping-mall-image" />
                </div>
                <div className={`shopping-mall-mode-item${value === 'platform' ? ' active' : ''}`}
                     onClick={handleClick.bind(this, 'platform')}
                >
                    <div className="shopping-mall-mode-name ft-24">平台商城</div>
                    <div className="shopping-mall-mode-intro ft-14">由品牌统一管理会员、营销，允许多店铺入驻，独立管控商品、配送履约等</div>
                    <MallTypePlatformSvg className="shopping-mall-image" />
                </div>
                <div className={`shopping-mall-mode-item${value === 'agent' ? ' active' : ''}`}
                     onClick={handleClick.bind(this, 'agent')}
                >
                    <div className="shopping-mall-mode-name ft-24">经销商商城</div>
                    <div className="shopping-mall-mode-intro ft-14">由品牌统一管理会员、营销、商品，允许经销商以店铺进行入驻，完成配送履约、分润等</div>
                    <MallTypeAgentSvg className="shopping-mall-image" />
                </div>
            </div>
    )
}

export default OpenShoppingMall